<template>
  <!-- 文章列表 -->
  <div id="list-container">
    <ul class="note-list">
      <li
        v-for="item in articleList"
        :key="item.id"
        :class="{ 'have-img': item.imageUrl }"
      >
        <div class="content">
          <nuxt-link :to="`/article/${item.id}`" target="_blank">
            <p class="title">{{ item.title }}</p>
            <p class="abstract">
              {{ item.summary }}
            </p>
          </nuxt-link>
          <div class="meta">
            <nuxt-link
              :to="`/user/${item.id}`"
              target="_blank"
              class="nickname"
            >
              <i class="el-icon-user-solid"></i>{{ item.nickName }}
            </nuxt-link>
            <span><i class="el-icon-thumb"></i> {{ item.thumhup }}</span>
            <span><i class="el-icon-view"></i> {{ item.viewCount }}</span>
          </div>
        </div>
        <!-- 图片 -->
        <nuxt-link
          :to="`/article/${item.id}`"
          class="wrap-img"
          target="_blank"
          v-if="item.imageUrl"
        >
          <img :src="item.imageUrl" />
        </nuxt-link>
      </li>
    </ul>
    <!-- 分页 -->
    <el-row class="page" type="flex" justify="center">
      <el-tag v-if="nomore || articleList.length === 0" type="primary">
        没有更多了……
      </el-tag>
      <el-button
        v-else
        @click="load"
        :loading="isload"
        type="primary"
        size="small"
        round
      >
        {{ isload ? "加载中……" : "点击加载更多" }}
      </el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "IndexChild",
  data() {
    return {
      //是否正在加载数据
      isload: false,
      //是否还有数据，false表示还有数据
      nomore: false,
    };
  },
  methods: {
    //点击加载更多按钮发请求获取文章数据并进行逻辑判断
    async load() {
      this.isload = true;
      //asyncData返回的合并到data中的query数据代表发送请求的参数，点击按钮后请求页码加一
      this.query.current++;
      //发请求
      const { data } = await this.$getArticleList(this.query);
      //还有数据
      if (data.records && data.records.length > 0) {
        //合并新旧数组更新文章数组
        this.articleList = this.articleList.concat(data.records);
        this.nomore = false;
      } else {
        //没有数据了
        this.nomore = true;
      }
      this.isload = false;
    },
  },
  //点击首页左侧列表跳转路由进入这个组件时对路由进行拦截判断
  validate({ params }) {
    //返回为true则能正常跳转进入这个子路由，返回为false则不能进入该路由
    //进行参数校验
    const id = params.id ? params.id : 0;
    // 必须是number类型
    return /^\d+$/.test(id);
  },
  async asyncData({ app, params }) {
    // 分类id，为空则查询推荐
    const categoryId = params.id ? params.id : null;
    // 获取文章列表
    // 传递的参数：id、当前页码、当前页文章数量
    const query = { categoryId, current: 1, size: 20 };
    const { data } = await app.$getArticleList(query);
    return { query, articleList: data.records };
  },
};
</script>

<style scoped>
/*  文章列表 */
.note-list {
  margin: 0;
  padding: 0px;
  list-style: none; /*去除 li 圆点*/
}
.note-list li {
  position: relative;
  width: 100%;
  margin: 0 0 15px;
  padding: 15px 2px 20px 0;
  border-bottom: 1px solid #f0f0f0;
  word-wrap: break-word; /*自动换行 */
}

.note-list .title {
  margin: 7px 0 4px;
  display: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
/* 点击标题后的效果 */
.note-list .title:visited {
  color: #969696;
}

/* 简介 */
.note-list .abstract {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 24px;
  color: #999;
}

/* 统计 */
.note-list .meta {
  /* padding-right: 0!important; */
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
}
.note-list .meta span {
  margin-right: 10px;
  color: #b4b4b4;
}

.note-list .meta a {
  margin-right: 10px;
  color: #b4b4b4;
}

/* 图片 */
.note-list .have-img .content {
  padding-right: 165px;
}
.note-list li.have-img {
  min-height: 130px;
}
.note-list .have-img .wrap-img {
  position: absolute;
  top: 50%;
  margin-top: -60px;
  right: 5px;
  width: 150px;
  height: 100px;
}
.note-list .have-img .wrap-img img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
}

.page {
  margin-top: 15px;
}
</style>